<template>
  <div>
    <el-dialog
      title="标签管理"
      :visible.sync="tagVisible"
      width="80%"
      append-to-body
    >
      <avue-crud
        ref="crud"
        v-model="form"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        @search-change="searchChange"
        @search-reset="searchReset"
        @row-del="delRow"
        @row-save="updateRow"
        @row-update="updateRow"
      >
        <template v-slot:userCount="{ row }">
          <span
            style="color: #409eff"
            @click="relationChange(row)"
          >
            {{ row.userCount }}
          </span>
        </template>
      </avue-crud>
    </el-dialog>
    <relationUser
      v-model="visible"
      :node-id="nodeId"
    ></relationUser>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import crudMixins from '@/mixins/crud';
import relationUser from './relationUser.vue';
import {
  labelManageById,
  deleteLabel,
  insertLabel,
  updateLabel,
} from '@/api/app/custom-label';
export default {
  name: 'LabelUser',
  components: { relationUser },
  mixins: [crudMixins],
  props: {
    id: {
      type: String,
    },
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {},
      loading: false,
      relationId: '',
      nodeId: '',
      visible: false,
      tableOption: {
        ...window.$crudMixins.tableOptions,
        addBtn: false,
        addRowBtn: true,
        cellBtn: true,
        page: false,
        labelWidth: 110,
        column: [
          {
            label: '标签名称',
            prop: 'name',
            cell: true,
            search: true,
            maxlength: 30,
            rules: [
              {
                required: true,
                trigger: 'blur',
                message: '请输入标签名称',
              },
            ],
          },
          {
            label: '排序',
            prop: 'sort',
            cell: true,
            type: 'number',
            min: 1,
            value: 99,
            max: 99,
            rules: [
              {
                pattern: /^[0-9]*[1-9][0-9]*$/,
                message: '排序只能输入正整数',
                trigger: 'blur',
              },
              {
                required: true,
                message: '请输入排序',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '说明',
            prop: 'description',
            cell: true,
            maxlength: 50,
          },
          {
            label: '关联用户',
            prop: 'userCount',
          },
        ],
      },
    };
  },
  computed: {
    tagVisible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    ...mapGetters(['userInfo', 'access_token']),
  },
  watch: {
    tagVisible(val) {
      if (val) {
        this.getList();
      } else {
        this.searchForm.name = '';
      }
    },
  },
  methods: {
    //查询标签管理数据
    async getList() {
      try {
        this.tableLoading = true;
        const { data } = await labelManageById({
          ...this.searchForm,
          id: this.id,
        });
        this.tableLoading = false;
        this.tableData = data.data;
      } catch (error) {
        this.tableLoading = false;
        throw new Error(error);
      }
    },
    relationChange(row) {
      console.log('guanlian', row);
      this.nodeId = row.id;
      this.relationId = '1';
      this.visible = true;
    },
    updateRow(row, index, done, loading) {
      this.tableLoading = true;
      try {
        if (row.id) {
          const params = {
            id: row.id,
            name: row.name,
            sort: row.sort,
            description: row.description,
          };
          updateLabel(params).then(() => {
            this.getList();
            this.tableLoading = false;
          });
        } else {
          const params = {
            parentId: this.id,
            name: row.name,
            sort: row.sort,
            description: row.description,
          };
          insertLabel(params).then(() => {
            this.getList();
            this.tableLoading = false;
          });
        }
        done();
      } catch (e) {
        this.tableLoading = false;
        loading();
      }
    },
    saveRow(row, done, loading) {
      this.tableLoading = true;
      try {
        const params = {
          parentId: this.id,
          name: row.name,
          sort: row.sort,
          description: row.description,
        };
        insertLabel(params).then(() => {
          this.getList();
          this.tableLoading = false;
        });
        done();
      } catch (e) {
        done();
        this.tableLoading = false;
        loading();
      }
    },
    //删除标签
    async delRow(row) {
      this.tableLoading = true;
      try {
        await deleteLabel(row.id);
        await this.getList();
        this.tableLoading = false;
      } catch (e) {
        this.tableLoading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
